<template>
  <div>
    <el-button type="primary" :disabled="isSending" @click="throttledSendSms">
      {{ isSending ? "发送中..." : "发送验证码" }}
    </el-button>
  </div>
</template>

<script setup>
import { ref } from "vue";

// 节流函数 参数一为函数 第二参数为节流延迟时间
const throttle = (func, delay) => {
  let lastRun = 0;
  // 返回一个新的函数，这个新函数将代替原始函数被调用
  return function (...args) {
    const now = Date.now();
    // 检查当前时间是否距离上一次函数执行的时间超过了指定的延迟（delay）
    if (now - lastRun >= delay) {
      lastRun = now;
      func(...args);
    }
  };
};

// 响应式变量
const isSending = ref(false); // 是否正在发送短信
const sendInterval = 5000; // 发送间隔，单位毫秒

// 发送短信的方法（实际发送逻辑应该在这里）
const sendSms = async () => {
  if (isSending.value) return; // 如果正在发送，则不执行

  isSending.value = true; // 设置为正在发送状态

  try {
    // 模拟发送短信的异步操作（例如，调用API）
    await new Promise((resolve) => setTimeout(resolve, 1000)); // 模拟1秒的操作时间
    console.log("短信发送成功");
    // 这里可以添加发送成功后的逻辑，比如更新状态或显示提示信息
  } catch (error) {
    console.error("短信发送失败", error);
    // 这里可以添加发送失败后的逻辑，比如显示错误信息
  } finally {
    // 无论成功还是失败，都重置发送状态
    isSending.value = false;
  }
};

// 使用节流函数包装发送短信的方法
const throttledSendSms = throttle(sendSms, sendInterval);

// 注意：这里没有额外的倒计时逻辑，因为节流已经控制了发送频率
// 如果你需要用户在发送后等待一段时间才能再次发送，节流本身就做到了这一点
// 如果你还需要显示倒计时给用户看，你需要自己实现一个倒计时逻辑，但它与节流是分开的
</script>

<style scoped>
/* 添加一些简单的样式 */
button {
  padding: 10px 20px;
  font-size: 16px;
}
</style>
